<template>
	<!-- 云手机列表弹框 -->
	<el-dialog v-model="props.Cloud_dialog_flag" title="选择设备" width="1000" @close="handleCancel">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header flex_between_center">
				<h4 style="margin-top: 0px;margin-bottom: 0px;" :id="titleId" :class="titleClass">选择设备</h4>
			</div>
		</template>
		<div style="text-align: left;">
			<el-checkbox v-model="state.allchecked" @click="allselectPhone">全选</el-checkbox>
		</div>
		<el-scrollbar height="50vh" style="padding-right:10px;">
			<div class="clouds_list_box">
				<div class="child_phone" v-for="(item,index) in state.clouds_list" :key="item.id"
					@click.stop="selectPhone(index)">
					<div style="margin-right: 10px;">
						<el-checkbox v-model="item.checked" @change="selectPhone(index)"></el-checkbox>
					</div>
					<div>
						<p style="text-align: left;">{{ item.instance_name || `云机${item.id}` }}</p>
						<div class="phone_info">
							<div style="color: #909399;">ID: {{ item.instances.name }}</div>
							<div :style="{ color: getRemainingDaysColor(item) }">
								<CountdownComponent :expireTime="item.expire_time" :is_trial="item.is_trial" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-scrollbar>
		<el-button style="margin-top: 10px;width: 100%;" size="large" type="primary"
			@click="handleConfirm">{{props.is_bind_phone?'绑定':'解绑'}}</el-button>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		watch,
		nextTick,
		defineProps,
	} from 'vue'
	import request from '@/utils'
	import CountdownComponent from '@/components/CountdownComponent.vue';
	const props = defineProps({
		Cloud_dialog_flag: {
			type: Boolean,
			default: false
		},
		is_bind_phone: { //是绑定操作还是解绑操作
			type: Boolean,
			default: false
		},
		// 新增：接收父组件传递的预选中id数组
		preSelectedIds: {
			type: Array, // 类型为数组
			default: () => [] // 默认值为空数组
		}
	})
	const state = reactive({
		clouds_list: [],
		allchecked: false,
		is_bind_phone: false,
		clone_clouds_list: [], //记录云手机选中状态的数组
		selectedClouds: [] // 存储选中的云手机
	})
	// 定义 emits 向父组件发送事件
	const emit = defineEmits(['update:Cloud_dialog_flag', 'confirm', 'cancel'])
	// 使用计算属性来管理弹窗显示状态
	const dialogVisible = computed({
		get: () => props.Cloud_dialog_flag,
		set: (value) => {
			emit('update:Cloud_dialog_flag', value)
		}
	})
	// 监听 Cloud_dialog_flag 的变化
	watch(() => props.Cloud_dialog_flag, (newVal) => {
		if (newVal) {
			state.allchecked = false
			state.clouds_list = props.preSelectedIds.map(phone => ({
				...phone,
				checked: false,
			}));
		}
	})
	// 云手机弹框开关
	const Get_phone_list = () => {
		state.clouds_list = props.preSelectedIds.map(phone => ({
			...phone,
			checked: false,
		}));
	}
	const allselectPhone = () => {
		state.clouds_list = state.clouds_list.map(phone => ({
			...phone,
			checked: state.allchecked ? false : true
		}));
	}
	// 单选云手机，同步全选状态
	const selectPhone = (index) => {
		// 1. 更新当前项的选中状态
		state.clouds_list[index].checked = !state.clouds_list[index].checked
		// 2. 检查所有云机是否都被选中：
		// 用every遍历数组，所有项的checked为true时返回true，否则返回false
		const allChecked = state.clouds_list.every(phone => phone.checked === true);
		// 3. 同步全选框状态
		state.allchecked = allChecked;
	};
	//根据剩余时间不同颜色也不同
	const getRemainingDaysColor = (phone) => {
		const expireDate = new Date(phone.expireTime);
		const now = new Date();
		const diffTime = expireDate.getTime() - now.getTime();
		const days = Math.max(0, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
		if (days <= 1) return 'red';
		if (days <= 3) return 'orange';
		return '#909399';
	};
	// 处理确认
	const handleConfirm = () => {
		const checkedClouds = state.clouds_list.filter(item => item.checked === true);
		emit('confirm', checkedClouds)
		dialogVisible.value = false
	}
	// 处理取消
	const handleCancel = () => {
		emit('cancel')
		dialogVisible.value = false
	}

	// 处理弹窗关闭
	const handleClose = () => {
		dialogVisible.value = false
	}
</script>

<style lang="less" scoped>
	h4 {
		margin: 0px;
	}

	.clouds_list_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 20px;
		flex-wrap: wrap;

		.child_phone {
			width: calc(50% - 32px);
			display: flex;
			padding: 10px;
			border: 1px solid #eeeeee;
			border-radius: 5px;
			cursor: pointer;

			.phone_info {
				gap: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
			}
		}

	}
</style>